<template>
    <!-- 视频监控-抓拍记录 -->
    <div class="main_content">
        <div class="header">
            <div class="list">
                <DatePicker type="daterange" :options="options" :clearable="false" v-model="dateArr" v-if="inputShow" format="yyyy-MM-dd" placement="top" transfer  placeholder="请选择日期" style="width:240px;" @on-change="getDateArr" @on-clear='clearDateFn'></DatePicker>
                <DatePicker type="daterange" format="yyyy-MM-dd" placement="top"  placeholder="请选择日期" v-if="inputShow" style="opacity:0;position: absolute;top:-9999px;width:1px;"></DatePicker>
            </div>
            <div class="list">
                <div class="item">
                    <Input  style="width:200px" placeholder="请输入设备名称" search enter-button clearable  v-model="keyword" @on-search="keyworkFn" @on-clear='keyworkClearFn'>
                        <Icon type="ios-search" slot="suffix" style="color:#1891FF;"/>
                    </Input>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
            </div>
            <input type="text" class="intBox" style="display:none" />
        </div>
        <div class="box">
            <div class="checkBox">
                <ul class="check" v-if="list.length>0">
                    <li v-for="item in list" :key="item.id">
                        <el-image style="width:100%;height: 100%;" :src=" item.snapshotUrl" :preview-src-list="[item.snapshotUrl]" ></el-image>
                        <div class="check_tag">
                            <div class="item">
                                <span class="per">来源：{{item.deviceName}}</span>
                                <p>{{item.time}}</p>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="no_lsit" v-else>
                    <div class="no_lsit" style="width:96%;margin:auto;text-align:center;">
                        <img src="./../../assets/images/common/rotary_nodata.png" style="height: 506px;" />
                    </div>
                </div>
                <div class="clearfix"   style="border-top:1px solid #eee;">
                    <div class="float-right" style="margin-top:0.2rem;text-align: center;">
                        <Page v-if="totalCount" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <div class="previewImgModal" v-if="previewImgModal">
            <span class="close" @click="previewImgClose">
                <Icon type="ios-close-circle" style="color:#fff;font-size:24px;"/>
            </span>
            <img :src="previewImg" />
        </div>
    </div>
</template>

<script>
import {previewImg} from "@/mixins/previewImg.js"
import { initYMD } from '@/sever/utils.js';
import {getFvsSnapshotList} from "@/api/api.js";
export default {
    mixins:[previewImg],
    data() {
        return {
            options: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            dateArr:[],
            inputShow: false,
            pageNum: 1,
            pageSize: 12,
            current: 1,
            totalCount: "",
            keyword: "",
            list: [],
            deptId: "",
            bgimgList: [require("./../../assets/images/fvs/common/record0.png")],
            
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.pageNum = 1;
                this.current = 1;
                this.dateArr = [];
                this.keyword = "";
                this.initDate();
            }
        }
    },
    methods: {
        getDateArr(i,v){
            this.dateArr = i;
            this.getAllList();
        },
        clearDateFn(){
            this.initDate();
        },
        initDate() {
            let newDate = new Date();
            let oldDate = new Date();
            oldDate  = new Date(oldDate.setDate(newDate.getDate() - 28)); 
            let y = newDate.getFullYear();
            let m = newDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
            let d = newDate.getDate(); //获取当前日（1-31）
            let yy = oldDate.getFullYear();
            let mm = oldDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
            let dd = oldDate.getDate(); //获取当前日（1-31）
            m = m < 10 ? "0" + m : m ;
            d = d < 10 ? "0" + d : d ;
            mm = mm < 10 ? "0" + mm : mm ;
            dd = dd < 10 ? "0" + dd : dd ;
            let startDate = yy + "-" + mm + "-" + dd ;
            let endDate = y + "-" + m + "-" + d;
            this.dateArr = [startDate,endDate]
            this.getAllList();
        },
        getAllList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                keyword: this.keyword,
                deptId: this.deptId,
                startDate: initYMD(this.dateArr[0]),
                endDate:initYMD(this.dateArr[1]),
            };
            getFvsSnapshotList(params)
                .then(res => {
                    if (res.code == 200) {
                        let list = res.data.list;
                        this.list = list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        keyworkFn(){
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        keyworkChangeFn(){
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        keyworkClearFn(){
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.initDate();
        setTimeout(()=>{
            this.inputShow = true;
        },1)
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style lang="scss" scoped>
@import "./../../assets/style/fvs/msgModal.scss";
.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .header{
        padding: 20px;
        margin-bottom:10px;
        background-color: #fff;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 6px;
        .list {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 30px;
            .item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                height: 32px;
                background-color: #fff;
                box-sizing: border-box;
                font-size: 12px;
                color: #6d6d6d;
                // .ivu-input-icon-clear{
                //     right: 30px;
                // }
                .ivu-input{
                    width: 100%;
                    height: 32px;
                    background-color: transparent !important;
                }
                .ivu-input-search{
                    padding: 4px 7px  !important;
                }
            }
        }
    }
    .box {
        padding: 20px;
        background-color: #fff;
        height: calc(100% - 82px);
        .checkBox{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            .check{
                width: 100%;
                flex: 1;
                list-style: none;
                margin: 0 auto;
                overflow: hidden;
                margin-bottom: 10px;
                li{
                    width: 24.2%;
                    height: 32%;
                    position: relative;
                    margin-right: 1%;
                    margin-bottom: 0.7%;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    float: left;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &:nth-of-type(4n){
                        margin-right: 0;
                    }
                    .check_tag{
                        width: 100%;
                        padding: 10px 20px;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        background: rgba(56,56,56,0.3);
                        box-sizing: border-box;
                        .item{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: #fff;
                            font-size: 12px;
                            .el-button:hover{
                                background-color: transparent !important;
                                border: 1px solid var(--themeColor);
                                .text{
                                    color: var(--themeColor) !important;
                                }
                            }
                            .per{
                                color:#05F7EE;
                                font-size: 12px;
                            }
                            em{
                                width: 12px;
                                height: 12px;
                                display: inline-block;
                                border-radius: 50%;
                            }
                        }
                    }
                }
                .fvs_img {
                    width: 640px;
                    height: 360px;
                    text-align: center;
                    line-height: 360px;
                    font-size: 28px;
                }
                li:nth-child(4n){
                    margin-right:0px!important;
                }
            }
        }
    }
}
.chart {
    width: 668px;
    height: 400px;
    margin: auto;
}
.video-js {
    width: 668px !important;
    height: 400px !important;
}
/deep/.ivu-input-group{
    border-radius:20px;
    overflow: hidden;
}
/deep/.ivu-input-group .ivu-input{
    border-radius: 20px 0 0 20px;
    border-color:#EBF2F8;
    background:#EBF2F8;
}
</style>
